<template>
   <div style="padding-top: 16px;">
    <h2>24格网格</h2>
    <p>
      <strong>预览</strong>
    </p>
    <z-row class="demoRow" gutter="50">
      <z-col span="8" v-for="i in 3" :key="i">
        <div class="demoCol">8</div>
      </z-col>
    </z-row>

    <z-row class="demoRow" gutter="20">
      <z-col span="6" v-for="i in 4" :key="i">
        <div class="demoCol">6</div>
      </z-col>
    </z-row>

    <z-row class="demoRow" gutter="10">
      <z-col span="4" v-for="i in 6" :key="i">
        <div class="demoCol">4</div>
      </z-col>
    </z-row>

    <z-row class="demoRow" gutter="4">
      <z-col span="2" v-for="i in 12" :key="i">
        <div class="demoCol">2</div>
      </z-col>
    </z-row>
    <p>
      <strong>代码</strong>
    </p>
    <pre><code>{{content}}</code></pre>
  </div>
</template>

<script>
import {zCol, zRow} from '../../../src/main'
export default {
  components: {
    zCol, zRow
  },
  data() {
    return {
      content: `
          <z-row class="demoRow" gutter="50">
            <z-col span="8" v-for="i in 3" :key="i">
              <div class="demoCol">8</div>
            </z-col>
          </z-row>

          <z-row class="demoRow" gutter="20">
            <z-col span="6" v-for="i in 4" :key="i">
              <div class="demoCol">6</div>
            </z-col>
          </z-row>

          <z-row class="demoRow" gutter="10">
            <z-col span="4" v-for="i in 6" :key="i">
              <div class="demoCol">4</div>
            </z-col>
          </z-row>

          <z-row class="demoRow" gutter="4">
            <z-col span="2" v-for="i in 12" :key="i">
              <div class="demoCol">2</div>
            </z-col>
          </z-row>
      `.replace(/^ {8}/gm, '').trim()
    }
  }
}
</script>

<style>
.demoRow {
  margin-bottom: 10px;
}
.demoCol {
  height: 50px;
  background: #eee;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 50px;
}
</style>
